<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>子系统</el-breadcrumb-item>
            <el-breadcrumb-item>关闭子系统</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>


    <el-steps :space="200" :active="active">
      <el-step title="step 1:" description="Overview"></el-step>
      <el-step title="step 2:" description="Storage Pools,Virtual Disks"></el-step>
      <el-step title="step 3:" description="Hosts"></el-step>
      <el-step title="step 1:" description="Initiators"></el-step>
      <el-step title="step 2:" description="Presentations"></el-step>
      <el-step title="step 3:" description="Finalize"></el-step>
    </el-steps>
    <el-button style="margin-top: 12px;" @click="prev">上一步</el-button>
    <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
  </div>
</template>

<script>
  export default {
    name: 'subsystem_restart',
    data () {
      return {
        active: 0
      }
    },
    methods: {
      next () {
        if (this.active++ > 4) this.active = 0
      },
      prev () {
        if (this.active-- === 0) this.active = 0
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">


</style>
